@import "../../styles/index.scss";

.le-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: $drawerZIndex;

  .le-drawer-content {
    min-width: 300px;
    background-color: #fff;
    border: 0;
    pointer-events: auto;
    box-shadow: $drawerShadow;
    position: absolute;
    animation: fadeInRight linear 300ms;
    .le-drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding: 16px 24px;
      border-bottom: 1px solid #f0f0f0;
      border-radius: 2px 2px 0 0;
      .le-icon {
        cursor: pointer;
      }
    }
    .le-drawer-body {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      padding: 24px;
      overflow: auto;
      font-size: 14px;
      line-height: 1.5715;
      word-wrap: break-word;
    }
  }
  &.le-drawer-mask {
    background-color: rgba(0, 0, 0, 0.45);
  }
  &.le-drawer-right {
    .le-drawer-content {
      right: 0;
      height: 100%;
    }
  }
  &.le-drawer-left {
    .le-drawer-content {
      left: 0;
      height: 100%;
      animation: fadeInLeft linear 300ms;
    }
  }
  &.le-drawer-top {
    .le-drawer-content {
      top: 0;
      width: 100%;
      min-height: 200px;
      animation: fadeInTop linear 300ms;
    }
  }
  &.le-drawer-bottom {
    .le-drawer-content {
      bottom: 0;
      width: 100%;
      min-height: 200px;
      animation: fadeInBottom linear 300ms;
    }
  }
  @keyframes fadeInRight {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(0);
    }
  }
  @keyframes fadeInLeft {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(0);
    }
  }
  @keyframes fadeInTop {
    0% {
      transform: translateY(-100%);
    }

    100% {
      transform: translateY(0);
    }
  }
  @keyframes fadeInBottom {
    0% {
      transform: translateY(100%);
    }

    100% {
      transform: translateY(0);
    }
  }
}
